<template>
  <div class="login-wrap">
      <el-form class="login-container">
        <h1 class="title">用户登陆</h1>
        <el-form-item style="text-align:center"> 
          <el-radio-group v-model="role" @input="chooseRole">
            <el-radio-button label="jiazhang">家长</el-radio-button>
            <!-- <el-radio-button label="caipan">裁判</el-radio-button> -->
            <el-radio-button label="duiwu">单位</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item >
          <el-input type="text" v-model="username"  placeholder="手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input type="password" v-model="password" placeholder="用户密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doLogin" style="width: 100%;">登陆</el-button>
        </el-form-item>
        <el-row type="flex" style="margin-top: -10px;" justify="space-around">
            <el-button type="primary" plain size="mini" @click="doRegister">注册账号</el-button>
            <el-button type="primary" plain size="mini" @click="forgetPassword">忘记密码</el-button>
        </el-row>
      </el-form>
      <el-dialog  :close-on-click-modal="false"
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>修改密码请致电客服，客服电话：13969787776（微信同号）</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
 
<script>
export default{
  name:'Login',
  data(){
    return {
      username:'',
      password:'',
      role: 'jiazhang',
      dialogVisible: false
    }
  },
  methods:{
    chooseRole() {
      // console.log(this.role,'role')
    },
    forgetPassword() {
      this.dialogVisible = true
    },
    doLogin(){
      let username=this.username;
      let password=this.password;
      let roleKey = this.role
      let params = {
        username:username,
        password:password,
        type:roleKey
      }
      this.$store.dispatch("Login", params).then((res) => {
        // console.log('登陆成功',res)
        if(res.data.ifRegistered === false) {
          this.$router.push('/register')
        } else {
          this.$router.push({ path: this.redirect || "/user" }).catch(()=>{});
        }
      }).catch(() => {
        this.loading = false;
        console.log('登陆失败')
        // if (this.captchaEnabled) {
        //   this.getCode();
        // }
      });
      // login(username,password,roleKey).then(res=> {
      //   this.$store.state.auth.userInfo.isLogin = true
      //   this.$store.state.auth.userInfo.username = res.data.userName
      //   this.$router.push('/user')
      // }).catch(()=> {
      //   console.log('错误')
      // })
    },
    doRegister(){
      this.$router.push('/register')
    }
  }
}
</script>
 
<style>
  	.login-wrap {
  		box-sizing: border-box;
  		width: 100%;
  		height: 100%;
  		padding-top: 10%;
  		/* background-color: #112346; */
  		background-repeat: no-repeat;
  		background-position: center right;
  		background-size: 100%;
  	}
 
  	.login-container {
  		border-radius: 10px;
  		margin: 0px auto;
  		width: 300px;
  		padding: 30px 35px 15px 35px;
  		background: #fff;
  		border: 1px solid #eaeaea;
  		text-align: left;
  		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  	}
 
  	.title {
  		margin: 0px auto 20px auto;
  		text-align: center;
  		color: #505458;
  	}
</style>